<template>
    <div style="margin-top: 20px">
        <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="宠物名称">
                <el-input v-model="searchForm.name" placeholder="宠物名称"></el-input>
            </el-form-item>
            <el-form-item label="宠物状态">
                <el-select v-model="searchForm.state" placeholder="宠物状态">
                    <el-option label="下架" value="0"></el-option>
                    <el-option label="上架" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toQuery">查询</el-button>
                <el-button type="info" @click="onSubmit">新增</el-button>
                <el-button type="success" @click="onSubmit">宠物上架</el-button>
                <el-button type="warning" @click="onSubmit">宠物下架</el-button>
                <el-button type="danger" @click="onSubmit">批量删除</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名字">
            </el-table-column>
            <el-table-column
                    prop="saleprice"
                    label="售价">
            </el-table-column>
            <el-table-column
                    prop="costprice"
                    label="成本价">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="状态">
                <template slot-scope="scope">-->
                    <el-tag type="danger" v-if="scope.row.state == 0">下架</el-tag>
                    <el-tag type="success" v-if="scope.row.state == 1">上架</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="typeId"
                    label="类型">
                <template slot-scope="scope">
                    <el-tag type="success">{{findTypeNameById(scope.row.typeId)}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="resourceType"
                    label="宠物来源">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.currPage"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="searchForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                multipleSelection: [],
                searchForm: {//查询条件
                    currPage: 1,
                    pageSize: 4
                },
                total: 0, //分页的总记录条数
                tableData: [],
                petTypeList: []
            }
        },
        methods: {
            toQuery() {
                console.log(">>>>>>>>>>" + JSON.stringify(this.searchForm))
                this.$http.post("/pet/findpage", this.searchForm).then(res => {
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                })
            },

            findAllType() {
                this.$http.get("/pettype/findall").then(res => {
                    this.petTypeList = res.data;
                })
            },
            //定义一个方法，根据pet_type_id 查找对应的pet_type_name属性
            findTypeNameById(id) {
                //console.log(">>>>>>>>id=" + id + ",typeList=" + JSON.stringify(this.petTypeList))
                //循环查找
                let typeName = "";
                //为什么使用这种原生循环查询，
                // 理由：主要一旦找到了对应的类型名称，就希望循环终止，而for中可以使用break,所以选择这种循环
                for (let index = 0;index < this.petTypeList.length ; index++){
                    let item = this.petTypeList[index];
                    //console.log("item.id="+item.id+"item.id == id:"+(item.id == id))
                    if (item.id == id){
                        typeName = item.name;
                        break;
                    }
                }
                return typeName;
                // this.petTypeList.map((item) => {
                //     console.log("item.id="+item.id+"item.id == id:"+(item.id == id))
                //     if (item.id == id) {
                //         return item.name;
                //     }
                // })

            },

            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.searchForm.pageSize = val;
                this.toQuery();
            },
            handleCurrentChange(val) {
                this.searchForm.currPage = val;
                this.toQuery();
            }

        },
        mounted() {
            this.toQuery();
            this.findAllType();
        }


    }
</script>